
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="mainl" style="width: 100%; height: 500px"></div>
    <div id="mainr" style="width: 100%; height: 500px"></div>
    

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainl'));
        
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '基础雷达图'
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:10, name:'风向概率1'},
                        {value:30, name:'风向概率2'},
                        {value:60, name:'风向概率3'},
                        {value:80, name:'风向概率4'},
                        {value:90, name:'风向概率5'}
                    ],
                    roseType: 'angle',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>
</html>